<!DOCTYPE html>
<html lang="en" class="h-full">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="../../docs/images/pyxel_icon_64x64.ico" />
    <title>Pyxel Web Launcher</title>
    <script src="https://cdn.tailwindcss.com/3.4.17"></script>

    <style type="text/tailwindcss">
      @layer components {
        .page {
          @apply bg-gray-900 h-full text-gray-100 antialiased;
        }
        .container {
          @apply mx-auto p-6 max-w-3xl;
        }
        .card {
          @apply bg-gray-800 shadow-sm px-6 py-4 border border-gray-700 rounded-2xl;
        }
        .link {
          @apply outline-none focus:ring-1 focus:ring-indigo-300 text-indigo-400 hover:text-indigo-300 underline underline-offset-2;
        }
        .link-strong {
          @apply font-semibold text-indigo-400 hover:text-indigo-300 underline underline-offset-2 break-all;
        }
        .label {
          @apply font-medium text-sm;
        }
        .input {
          @apply bg-gray-900 px-3 py-2 border border-gray-600 focus:border-indigo-500 rounded-lg outline-none w-full placeholder:text-gray-400 text-sm;
        }
        .input-link {
          @apply flex items-center min-h-[2.25rem] font-mono break-all select-all input link;
        }
        .help {
          @apply space-y-1 mt-1 pl-5 text-gray-400 text-xs list-disc;
        }
        .codechip {
          @apply inline-flex items-center bg-gray-700 px-1.5 py-0.5 rounded-md ring-1 ring-gray-600 ring-inset font-mono text-gray-100 text-xs align-middle leading-tight;
        }
        .checkbox {
          @apply border-gray-600 focus:ring-indigo-500 w-4 h-4 text-indigo-600;
        }
      }
    </style>
  </head>

  <body class="page">
    <main class="container">
      <header class="mb-4">
        <h1 class="font-semibold text-2xl tracking-tight">
          Pyxel Web Launcher
        </h1>
        <p class="mt-2 text-gray-300 text-sm">
          Launcher tool for the WebAssembly version of
          <a class="link" href="https://github.com/kitao/pyxel">Pyxel</a>, a
          retro game engine for Python.
        </p>
      </header>

      <section class="card">
        <div class="gap-5 grid grid-cols-1">
          <!-- Startup File -->
          <div class="gap-2 grid">
            <label for="startup-file" class="label"
              >Startup File URL on GitHub</label
            >
            <input
              id="startup-file"
              type="text"
              size="60"
              class="input"
              placeholder="https://github.com/USER/REPO/blob/BRANCH/PATH/TO/APP.pyxapp"
            />
            <ul class="help">
              <li>
                Startup file type should be
                <code class="codechip">.pyxapp</code>
                or
                <code class="codechip">.py</code>.<br />
                Example:
                <a
                  class="link"
                  href="https://github.com/kitao/pyxel/blob/main/python/pyxel/examples/apps/megaball.pyxapp"
                >
                  https://github.com/kitao/pyxel/blob/main/python/pyxel/examples/apps/megaball.pyxapp
                </a>
              </li>
            </ul>
          </div>

          <!-- Virtual Gamepad -->
          <div class="flex items-center gap-2">
            <label for="virtual-gamepad" class="label"
              >Enable Virtual Gamepad</label
            >
            <input
              id="virtual-gamepad"
              type="checkbox"
              checked
              class="checkbox"
            />
          </div>

          <!-- Additional Packages -->
          <div class="gap-2 grid">
            <label for="additional-packages" class="label"
              >Additional Packages</label
            >
            <input
              id="additional-packages"
              type="text"
              size="60"
              class="input"
              placeholder="numpy,matplotlib"
            />
            <ul class="help">
              <li>
                Only
                <a
                  class="link"
                  href="https://pyodide.org/en/stable/usage/packages-in-pyodide.html"
                  >packages supported by Pyodide</a
                >
                can be used.
              </li>
              <li>
                If there are multiple packages, separate them with commas like
                <code class="codechip">a,b,c</code>.
              </li>
            </ul>
          </div>

          <!-- Launch URL -->
          <div class="gap-2 grid pt-2">
            <span class="label">Application Launch URL</span>
            <a
              id="launch-url"
              target="_blank"
              rel="noopener noreferrer"
              class="input-link"
              style="display: block"
            ></a>
          </div>
        </div>
      </section>

      <section class="mt-4">
        <p class="mt-4 text-gray-300 text-sm">
          For specific instructions, please refer to
          <a
            class="link"
            href="https://github.com/kitao/pyxel/blob/main/docs/pyxel-web-en.md"
            >this page</a
          >
          (<a
            class="link"
            href="https://github.com/kitao/pyxel/blob/main/docs/pyxel-web-ja.md"
            >日本語</a
          >).
        </p>
      </section>
    </main>

    <script>
      function buildLaunchUrl() {
        const startupFile = document.getElementById("startup-file").value;
        const virtualGamepad =
          document.getElementById("virtual-gamepad").checked;
        const additionalPackages = document.getElementById(
          "additional-packages"
        ).value;
        const launchLink = document.getElementById("launch-url");
        launchLink.textContent = launchLink.href = "";

        if (
          !startupFile.startsWith("https://github.com/") ||
          !(startupFile.endsWith(".py") || startupFile.endsWith(".pyxapp")) ||
          additionalPackages.match(/[^a-zA-Z0-9,]/)
        ) {
          return;
        }

        const paths = startupFile.split("/");
        const dottedPath = paths.slice(3, 5).concat(paths.slice(7)).join(".");
        const filePath = dottedPath.split(".").slice(0, -1).join(".");
        const fileExt = dottedPath.split(".").slice(-1)[0];
        let launchUrl = "https://kitao.github.io/pyxel/wasm/launcher/?";
        launchUrl += fileExt === "py" ? "run" : "play";
        launchUrl += "=" + filePath;

        if (virtualGamepad) {
          launchUrl += "&gamepad=enabled";
        }

        if (additionalPackages != "") {
          launchUrl += "&packages=" + additionalPackages;
        }

        launchLink.textContent = launchLink.href = launchUrl;
      }

      document
        .getElementById("startup-file")
        .addEventListener("input", buildLaunchUrl);
      document
        .getElementById("virtual-gamepad")
        .addEventListener("change", buildLaunchUrl);
      document
        .getElementById("additional-packages")
        .addEventListener("input", buildLaunchUrl);
    </script>
  </body>
</html>
